<template>
  <!-- v-Clickoutside="handelChange" -->
  <div class="task">
    <div class="headBox">
      <div style="min-width: 170px">
        <el-button style="margin: 0 10px 0 5px" @click="handleSave" v-if="(isMyCaeate || isOtherDesiger) && canEdit">保存</el-button>
        <!-- <el-button
          style="margin-left: 20px"
          slot="reference"
          @click="handleCheckIsLock"
          v-if="currData.isLockedForPublish && canEdit && isContinuousPublish"
          >{{
            currData.state === "已发布" || currData.state === "已修改未发布"
              ? "再次发布"
              : "发布任务"
          }}</el-button
        > -->
        <el-popconfirm
          title="是否发布任务？已开设课程数据将与当前更新数据同步"
          @confirm="handlePubTask"
          ref="popPub"
          v-if="(isMyCaeate || isOtherDesiger) && canEdit && isContinuousPublish && currData"
        >
          <!-- !currData.isLockedForPublish &&  -->
          <el-button style="margin-left: 5px" slot="reference">发布任务</el-button>
        </el-popconfirm>
        <!-- <el-button style="margin-left: 20px" slot="reference" @click="copyTask"
          v-if="(isMyCaeate || isOtherDesiger) && canEdit && isContinuousPublish && currData">复制任务</el-button> -->
      </div>
      <div class="taskIndex">
        <!-- <i
          class="iconfont iconlock"
          v-if="isContinuousPublish && currData.isLockedForPublish === true"
          title="不发布"
          @click="handleChangeTaskStateCanPub"
        ></i>
        <i
          class="iconfont iconLOCKOPEN"
          v-if="isContinuousPublish && currData.isLockedForPublish === false"
          title="可发布"
          @click="handleChangeTaskStateNoPub"
        ></i> -->
        {{ (isMyCaeate || isOtherDesiger) && canEdit ? "正在编辑任务" : "正在浏览任务" }}
        {{
          (currData.state === "已发布" || currData.state === "已修改未发布") &&
          isContinuousPublish
            ? "（已发布）"
            : ""
        }}
        <!-- {{ currGroupIndex + 1 + "-" + (currTaskIndex + 1) }} -->
      </div>
      <div class="weightBox">
        任务权重：
        <el-input
          type="text"
          :maxlength="3"
          :max="100"
          v-model="currData.weightInGroup"
          onkeyup="this.value=this.value.replace(/[^\d%]$/g,'');"
          placeholder=""
          @change="handelChange('weightInGroup')"
          :key="currGroupIndex + '-' + currTaskIndex"
          :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
        >
        </el-input>
      </div>
    </div>
    <div class="taskEdit">
      <div class="inputTips" v-if="(isMyCaeate || isOtherDesiger) && canEdit">
        <div title="必填">
          <span class="mustInput">*</span>
          为必填项
        </div>
        <!-- <div title="选填">
          <span class="choiceInput">*</span>
          为选填项
        </div> -->
      </div>
      <div class="taskInfo">
        <div class="taskIconBox">
          <div
            class="startMustTips"
            title="必填"
            v-if="(isMyCaeate || isOtherDesiger) && canEdit && currData.iconPath == ''"
          >
            *
          </div>
          <uploadIcon
            @uploadDataChange="uploadDataChange"
            :parentIconList="parentIconList"
            :currData="currData"
            :key="currGroupIndex + '-' + currTaskIndex"
            :isMyCaeate="isMyCaeate"
            :isOtherDesiger="isOtherDesiger"
            :canEdit="canEdit"
            :saveName="'taskIcon'"
          />
        </div>
        <div class="taskNameBox">
          <div
            class="startMustTips"
            title="必填"
            v-if="(isMyCaeate || isOtherDesiger) && canEdit && currData.name == ''"
          >
            *
          </div>
          <div class="inputName">任务名称</div>
          <el-input
            v-model="currData.name"
            placeholder="请输入任务名称"
            @input="handelChange('name')"
            :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
            :maxlength="300"
            show-word-limit
          ></el-input>
        </div>
      </div>
      <div class="goalAnddesc">
        <div class="descBox">
          <!-- <div
            class="startChoiceTips"
            title="选填"
            v-if="isMyCaeate && canEdit && currData.description == ''"
          >
            *
          </div> -->
          <!-- <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入任务描述"
            v-model="currData.description"
            @input="handelChange"
            :key="currGroupIndex + '-' + currTaskIndex"
          >
          </el-input> -->
          <!-- <div :id="'toolBar' + 'taskDesc-' + currTaskIndex"></div> -->
          <div>
            <el-switch
              v-model="currData.canVote"
              @change="handelChange('canVote')"
              active-text="允许投票"
              :disabled="!(isMyCaeate || isOtherDesiger) || !canEdit || !isContinuousPublish || !currData">
            </el-switch>
            <span style="margin-left: 10px;">注：允许投票的任务，引导文中必须含有一个展示类型，且不能存在多个展示类型</span>
          </div>
          <div class="goalBox">
            <el-switch
              v-model="currData.isFinalTask"
              @change="handelChange('isFinalTask')"
              active-text="期末考核"
              :disabled="!(isMyCaeate || isOtherDesiger) || !canEdit || !isContinuousPublish || !currData">
            </el-switch>
            <el-switch
              v-model="currData.isGroupTask"
              @change="handelChange('isGroupTask')"
              active-text="小组任务：只能由组长提交任务"
              :disabled="!(isMyCaeate || isOtherDesiger) || !canEdit || !isContinuousPublish || !currData">
            </el-switch>
          </div>
          <div class="goalBox">
            <span>
              <el-input placeholder="请输入任务编码" v-model="currData.taskCode" style="width: 300px; margin-right: 10px;" @change="handelChange('taskCode')">
                <template slot="prepend">代码</template>
              </el-input>
            </span>
            <span>
              访问控制
              <el-select v-model="currData.resultAccessType" placeholder="请选择访问类型" @change="handelChange('resultAccessType')">
                <el-option
                  v-for="item in taskOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select>
            </span>
            <el-switch
              v-model="currData.needSelfScore"
              @change="handelChange('needSelfScore')"
              active-text="需要自评"
              :disabled="!(isMyCaeate || isOtherDesiger) || !canEdit || !isContinuousPublish || !currData">
            </el-switch>
          </div>
          <!-- taskCode: '', // 任务编码
        needSelfScore: false, // 自评
        resultAccessType: '可公开', // '可公开', '必须公开', '必须不公开' -->
          <div class="inputName goalBox">任务简介</div>
          <edit
            :editId="'taskDesc-' + currTaskIndex"
            :gindex="currTaskIndex"
            @submit="handelSaveTaskDesc"
            :gitem="currData"
            :key="'taskDesc-' + currGroupIndex + '-' + currTaskIndex"
            :currGroupIndex="currGroupIndex"
            :currTaskIndex="currTaskIndex"
            :showOtherTool="false"
            :isMyCaeate="isMyCaeate"
            :isOtherDesiger="isOtherDesiger"
            :showUnopenBtn="true"
            :canEdit="canEdit"
            :placeholder="'请输入任务简介'"
            :objKeyName="'description'"
            :showEditAnswerBtn="false"
            :maxlength="300"
            show-word-limit
            :notUpload="true"
          />
        </div>
        <div class="goalBox">
          <!-- <div
            class="startChoiceTips"
            title="选填"
            v-if="isMyCaeate && canEdit && currData.goal == ''"
          >
            *
          </div> -->
          <div class="inputName">学习目标</div>
          <el-input
            type="textarea"
            :rows="8"
            placeholder="请输入任务学习目标"
            v-model="currData.goal"
            @input="handelChange('goal')"
            :key="currGroupIndex + '-' + currTaskIndex"
            :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit"
            :maxlength="150"
            show-word-limit
          >
          </el-input>
        </div>
      </div>
      <div class="guidelinesBox" ref="guidelinesBox">
        <!-- <div class="title">引导文：</div> -->
        <draggable
          v-model="currData.guidelines"
          chosen-class="chosen"
          force-fallback="true"
          handle=".moveIcon"
          group="guidelines"
          animation="100"
          @start="onStart"
          @end="onEnd"
          @sort="onSort"
          :key="currGroupIndex + '-' + currTaskIndex"
          :disabled="
            (!isMyCaeate && !isOtherDesiger) || !canEdit || (checkTaskState && isContinuousPublish)
          "
        >
          <transition-group>
            <div
              class="guidelineBox"
              v-for="(gitem, gindex) in currData.guidelines"
              :key="currGroupIndex + '-' + currData.id + '-' + gitem.id"
            >
              <div class="guideline guidelineS">
                <div
                  class="startMustTips"
                  title="必填"
                  v-if="
                    ((isMyCaeate || isOtherDesiger) && canEdit && gitem.description == '') ||
                    (gitem.operType == '刷题' && !gitem.foreignID)
                  "
                >
                  *
                </div>
                <div class="guidelineNum">
                  {{ gindex + 1 }}
                </div>
                <div class="addIcon" v-if="(isMyCaeate || isOtherDesiger) && canEdit && !isCanVote">
                  <img
                    :src="require('@/assets/images/addIcon.png')"
                    title="添加"
                    @click="handelAddUp(gindex, gitem)"
                  />
                </div>
                <div class="addIcon addIcon-down" v-if="(isMyCaeate || isOtherDesiger) && canEdit && !isCanVote">
                  <img
                    :src="require('@/assets/images/addIcon.png')"
                    title="添加"
                    @click="handelAddDown(gindex, gitem)"
                  />
                </div>
                <div
                  class="removeIcon"
                  v-if="
                    (isMyCaeate || isOtherDesiger) &&
                    canEdit &&
                    (gindex !== 0 || currData.guidelines.length !== 1)
                  "
                >
                  <img
                    :src="require('@/assets/images/delete.png')"
                    title="删除"
                    @click="handleShowDeleteDialog(gindex, gitem)"
                  />
                </div>
                <div class="content">
                  <edit
                    :editId="
                      currGroupIndex + '-' + currTaskIndex + '-' + gitem.id
                    "
                    :gindex="gindex"
                    @submit="handelSave"
                    :gitem="gitem"
                    :key="currGroupIndex + '-' + currTaskIndex + '-' + gitem.id"
                    :currGroupIndex="currGroupIndex"
                    :currTaskIndex="currTaskIndex"
                    :showOtherTool="true"
                    :showUnopenBtn="true"
                    :isMyCaeate="isMyCaeate"
                    :isOtherDesiger="isOtherDesiger"
                    :canEdit="canEdit"
                    :isContinuousPublish="isContinuousPublish"
                    :placeholder="'请输入引导文内容'"
                    ref="guideline"
                    @watchFocus="watchFocus"
                    :objKeyName="'description'"
                    :showEditAnswerBtn="true"
                    :courseDetailData="courseDetailData"
                  />
                  <!-- <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入课程简介"
                  v-model="gitem.submitContent"
                  @change="handelChange"
                >
                </el-input> -->
                </div>
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>
      <memo
        :currData="currData"
        @remarkChange="remarkChange"
        :isMyCaeate="isMyCaeate"
        :isOtherDesiger="isOtherDesiger"
        :canEdit="canEdit"
      />
    </div>
    <el-dialog
      title="提示"
      :visible.sync="showDeleteTips"
      width="30%"
      custom-class="deleteGroupTaskDialog"
    >
      <span>是否删除引导文</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeleteTips = false">取 消</el-button>
        <el-button type="primary" @click="handelDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import memo from "./remarks";
import uploadIcon from "@/components/uploadFile/uploadIcon";
import edit from "./editComponent/edit";
import draggable from "vuedraggable";
import {
  createTask,
  updateTask,
  publishDesigncourse,
  updatedesigncourse,
} from "@/request/designcourse";
import { saveTask } from "@/request/courses";
import { mapState } from "vuex";
import { copy } from "@/util/tool"

export default {
  components: {
    memo,
    uploadIcon,
    edit,
    draggable,
  },
  data() {
    return {
      test: "",
      options: [
        {
          value: "查阅",
          label: "查阅",
        },
        // {
        //   value: '播放',
        //   label: '播放',
        // },
        {
          value: "上传",
          label: "上传",
        },
        {
          value: "游戏",
          label: "游戏",
        },
        {
          value: "简答",
          label: "简答",
        },
        {
          value: "刷题",
          label: "刷题",
        },
        {
          value: "展示",
          label: "展示",
        }
        // {
        //   value: '下载',
        //   label: '下载',
        // },
        // {
        //   value: '无互动',
        //   label: '无互动',
        // },
      ],
      // 任务访问控制
      taskOptions:[
        {
          label: '可公开',
          value: '可公开',
        },
        {
          label: '必须公开',
          value: '必须公开',
        },
        {
          label: '必须不公开',
          value: '必须不公开',
        },
      ],
      value: "",
      // taskInfo: {
      //   goal: "",
      //   name: "",
      //   level: 1,
      //   iconPath: "",
      //   guidelines: [
      //     {
      //       noInTask: 1,
      //       operType: "上传 ",
      //       description: "",
      //       weightInTask: "",
      //     },
      //     {
      //       noInTask: 1,
      //       operType: "上传 ",
      //       description: "",
      //       weightInTask: "",
      //     },
      //   ],
      //   description: "",
      //   weightInGroup: 10,
      // },
      guidelinesDefault: {
        description: "",
        noInTask: 1,
        operType: "简答",
        weightInTask: 10,
        // memo: "",
        foreignID: 0,
        id: 1,
        limit: 0,
        accpet: '',
      },
      drag: false,
      canEdit: true,
      guidelineIsFocus: [],
      showDeleteTips: false, // 删除引导文提示框
      markDeleteGindex: null, // 记录删除的引导文索引
      markDeleteGitem: null, // 记录删除的引导文对象
    };
  },
  props: {
    currGroupIndex: Number,
    currTaskIndex: Number,
    currData: Object,
    isMyCaeate: Boolean, // 是否自己设计的
    isOtherDesiger: Boolean, // 是否是其它课程设计师
    // canEdit: Boolean, // 当前课程状态可否编辑
    parentIconList: Array, // 默认icon
    isContinuousPublish: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    courseDetailData: Object
  },
  watch: {
    "currData.guidelines"(n, o) {
      this.$forceUpdate();
    },
    currData(n, o) {},
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    checkTaskState() {
      if (
        (!this.currGroupIndex && this.currGroupIndex !== 0) ||
        (!this.currTaskIndex && this.currTaskIndex !== 0)
      )
        return false;
      return (
        this.$parent.courseDetailData.content[this.currGroupIndex]?.tasks?.[
          this.currTaskIndex
        ]?.state === "已发布" ||
        this.$parent.courseDetailData.content[this.currGroupIndex]?.tasks?.[
          this.currTaskIndex
        ]?.state === "已修改未发布"
      );
    },
    isCanVote() {
      return this.currData.canVote
    }
  },
  methods: {
    // 值发生改变
    handelChange(FieldName) {
      if (this.currData.state === "已发布") {
        this.currData.state = "已修改未发布";
      }
      this.$emit(
        "handelChange",
        {
          currData: this.currData,
          currTaskIndex: this.currTaskIndex,
          currGroupIndex: this.currGroupIndex,
        },
        "task",
        FieldName
      );
      this.$forceUpdate();
    },
    // 文件变化
    uploadDataChange(fileList) {
      this.currData.iconPath = fileList.url;
      this.handelChange("iconPath");
    },
    // 向上添加引导文
    handelAddUp(index, gitem) {
      if (gitem.state === "已发布") {
        this.$antdMessage.warning({
          content: "不能向已发布的引导文前插入新的引导文！",
        });
        return;
      }
      if ((!this.isMyCaeate && !this.isOtherDesiger) || !this.canEdit) return;
      let newGuidelinesDefault = Object.assign({}, this.guidelinesDefault);
      const currTime = new Date().getTime();
      newGuidelinesDefault.id = currTime;
      this.currData.guidelines.splice(
        Number(index),
        0,
        Object.assign({}, newGuidelinesDefault)
      );
      // this.currData.guidelines = Object.assign(
      //   [],
      //   [newGuidelinesDefault].concat(this.currData.guidelines)
      // );
      this.$forceUpdate();
      this.handelChange("guidelines");
      this.handleShrinkguideline(index);
      this.guidelineIsFocus = []; // 清空记录 已打开引导文的索引值
    },
    // 向下添加引导文
    handelAddDown(index, gitem) {
      if (
        this.currData.guidelines[index + 1] &&
        this.currData.guidelines[index + 1].state === "已发布"
      ) {
        this.$antdMessage.warning({
          content: "不能向已发布的引导文前插入新的引导文！",
        });
        return;
      }
      if ((!this.isMyCaeate && !this.isOtherDesiger) || !this.canEdit) return;
      let newGuidelinesDefault = Object.assign({}, this.guidelinesDefault);
      const currTime = new Date().getTime();
      newGuidelinesDefault.id = currTime;
      this.currData.guidelines.splice(
        Number(index) + 1,
        0,
        Object.assign({}, newGuidelinesDefault)
      );
      this.handelChange("guidelines");
      this.handleShrinkguideline(index + 1);
      this.guidelineIsFocus = []; // 清空记录 已打开引导文的索引值
    },
    // 收起其他引导文
    handleShrinkguideline(currIndex) {
      let guidelines = this.$refs.guideline;
      this.$nextTick(() => {
        guidelines.forEach((item, index) => {
          item.focus = false;
        });
        // 因为动态创建的元素是插入到数组 在数组的最后一位 与前端界面显示的有区别
        guidelines[guidelines.length - 1].focus = true;
      });
    },
    // 删除引导文
    handelDelete() {
      let gindex = this.markDeleteGindex;
      let gitem = this.markDeleteGitem;
      // if (gitem.state === "已发布") {
      //   this.$antdMessage.warning({
      //     content: "引导文已发布不能删除！",
      //   });
      //   return;
      // }
      if ((!this.isMyCaeate && !this.isOtherDesiger) || !this.canEdit) return;
      let newGuideline = this.currData.guidelines.filter(
        (item, index) => index !== gindex
      );
      this.currData.guidelines = newGuideline;
      this.showDeleteTips = false;
      this.handelChange("guidelines");
    },
    // 保存任务描述富文本数据
    handelSaveTaskDesc(objData) {
      this.currData.description = objData.data;
      this.handelChange("description");
    },
    // 保存富文本数据
    handelSave(objData) {
      this.currData.guidelines[objData.gindex].description = objData.data;
      this.handelChange("guidelines");
    },
    // 开始移动
    onStart() {
      this.drag = true;
    },
    // 结束移动
    onEnd() {
      this.drag = false;
      this.handelChange("guidelines");
    },
    // 拖拽位置发生变化
    onSort(val) {
      this.guidelineIsFocus = [];
      let guidelines = this.$refs.guideline;
      this.$nextTick(() => {
        guidelines.forEach((item, index) => {
          if (item.focus) {
            item.handleEmitFoucs(true);
          }
        });
      });
    },
    // 选择引导文类型
    handelChangeType(val, gindex) {
      this.currData.guidelines[gindex].operType = val;
    },
    // 备注发生变化
    remarkChange(val) {
      this.currData.memo = val;
      // 将数据提交到 数据源组件
      this.handelChange("memo");
    },
    // 将任务转为不可发布
    handleChangeTaskStateNoPub() {
      this.currData.isLockedForPublish = true;
      this.handelChange("isLockedForPublish");
    },
    // 将任务转为可发布
    handleChangeTaskStateCanPub() {
      this.currData.isLockedForPublish = false;
      this.handelChange("isLockedForPublish");
    },
    //
    handleCheckIsLock() {
      if (this.currData.isLockedForPublish) {
        this.$message({
          type: "warning",
          message: "任务已上锁，请点击图标开锁！",
        });
        // this.$nextTick(() => {
        //   this.$refs.popPub.visible = false
        // })
      }
    },
    // 发布任务
    async handlePubTask() {
      if (!this.currData.taskGroupID) {
        this.$antdMessage.warning({
          content: "此任务组是否还未发布，请先发布任务组！",
        });
        return;
      }
      if (!this.$route.query.courseID) {
        this.$antdMessage.error({
          content: "课程未创建、请保存课程信息！",
        });
        return;
      }

      // 找到所有未保存的任务ID
      let findTaskGroup = this.$parent.courseDetailData.content.find(
        (tgitem) => tgitem.taskGroupID == this.currData.taskGroupID
      );
      let findUpdateTask = findTaskGroup.tasks.filter(
        (ftitem) =>
          ftitem.updateFieldName.indexOf("taskNoInGroup") !== -1 &&
          ftitem.taskID
      );
      let findTaskID = findUpdateTask.map((titem) => titem.taskID) || null;

      if (!this.currData.taskID) {
        // let isCreate = await this.updateTaskContent();
        let isCreate = await this.$parent.updateCourseInfo(
          this.$route.query.courseID
        );
        if (isCreate) {
          this.$parent.isSave = true;
          let currData =
            this.$parent.courseDetailData.content[this.currGroupIndex].tasks[
              this.currTaskIndex
            ];
          this.$nextTick(() => {
            this.$parent.currShow = "task";
            this.$parent.currGroupIndex = this.currGroupIndex;
            this.$parent.currTaskIndex = this.currTaskIndex;
          });
          // this.$parent.handelChangePage(
          //   "task",
          //   currData,
          //   this.currGroupIndex,
          //   this.currTaskIndex
          // );
          // this.$set(this.$parent, 'currData', this.$parent.courseDetailData.content[this.currGroupIndex].tasks[this.currTaskIndex])
          this.$forceUpdate();
          // this.$antdMessage.success({
          //   content: "任务添加成功！",
          // });
        } else {
          this.$antdMessage.error({
            content: "任务保存失败！",
          });
          return;
        }
      }

      if (
        !this.$parent.isSave &&
        this.$route.query.courseID &&
        this.currData.updateFieldName.length !== 3
      ) {
        let isSave = await this.$parent.updateCourseInfo(
          this.$route.query.courseID
        );
        if (isSave) {
          this.$parent.isSave = true;
          this.$set(
            this.$parent,
            "currData",
            this.$parent.courseDetailData.content[this.currGroupIndex].tasks[
              this.currTaskIndex
            ]
          );
          this.$forceUpdate();
          // this.$antdMessage.success({
          //   content: "任务修改成功！",
          // });
        } else {
          this.$antdMessage.error({
            content: "任务修改失败！",
          });
          return;
        }
      }

      // const courseData = this.$parent.courseDetailData;
      // const currGroupIndex = this.$parent.currGroupIndex;
      // const currTaskIndex = this.$parent.currTaskIndex;
      // if (
      //   currTaskIndex !== 0 &&
      //   courseData.content[currGroupIndex].tasks[currTaskIndex - 1].state !==
      //     "已发布" &&
      //   courseData.content[currGroupIndex].tasks[currTaskIndex - 1].state !==
      //     "已修改未发布"
      // ) {
      //   this.$message({
      //     type: "warning",
      //     message: "发布失败，请先发布上一个任务！",
      //   });
      //   return;
      // }

      let item =
        this.$parent.courseDetailData.content[this.currGroupIndex].tasks[
          this.currTaskIndex
        ];
      let isPublish = false;
      if (this.currData.state === "未发布") {
        isPublish = this.handlePubCourseOrTask(item);
      } else {
        isPublish = this.handlePubCourseOrTask(item);
      }
      // 如果将taskIDArray成功发布 则删除在任务中 记录taskNoInGroup字段未保存的记录
      if (isPublish) {
        findUpdateTask.forEach(
          (titem) =>
            (titem.updateFieldName = titem.updateFieldName.filter(
              (fuitem) => fuitem !== "taskNoInGroup"
            ))
        );
        this.$emit('handlePublishedTask', item.taskGroupID, item.taskID)
      }
      // this.handelChange();
    },
    /**
     * 持续发布
     * @description 添加学习任务
     */
    // updateTaskContent() {
    //   return new Promise((resolve, reject) => {
    //     let params = {
    //       courseID: this.$route.query.courseID,
    //       content: [
    //         JSON.parse(
    //           JSON.stringify(
    //             this.$parent.courseDetailData.content[this.currGroupIndex]
    //           )
    //         ),
    //       ],
    //     };
    //     params["courseID"] = Number(this.$route.query.courseID);
    //     params.taskGroupTotal = this.$parent.groupCount;
    //     params.taskTotal = this.$parent.taskCount;
    //     params.memo = undefined;
    //     params.taskGroups = {};
    //     // 记录当前课程 无任务组ID的编号
    //     let markNoGroupId_Num = 1;

    //     params.content.map((item, index) => {
    //       item.courseID = Number(this.$route.query.courseID);
    //       item.weightInCourse = Number(item.weightInCourse);
    //       item.groupNoInCourse = this.currGroupIndex + 1;
    //       item.memo = undefined;
    //       item.state = undefined;
    //       item.taskTotal = item.tasks.length;
    //       // 定义新的存放任务的属性
    //       let newTasks = {};
    //       // 记录当前任务组 无任务ID的编号
    //       let markNoTaskId_Num = 1;

    //       item.tasks.map((titem, tindex) => {
    //         titem.courseID = Number(this.$route.query.courseID);
    //         titem.weightInGroup = Number(titem.weightInGroup);
    //         titem.taskNoInGroup = this.currTaskIndex + 1;
    //         titem.memo = undefined;
    //         titem.id = undefined;
    //         titem.guidelineTotal = titem.guidelines.length;

    //         // 找到最大ID
    //         let maxID = titem.guidelines
    //           .map((gitem, index) => {
    //             if (gitem.guidelineID) {
    //               return gitem.guidelineID;
    //             }
    //           })
    //           .filter((gitem) => gitem)
    //           .reverse()[0];
    //         maxID = !maxID && maxID !== 0 ? 0 : maxID;

    //         let newGuideline = {};
    //         titem.guidelines.map((gitem, gindex) => {
    //           gitem.weightInTask = Number(gitem.weightInTask);
    //           gitem.noInTask = gindex + 1;
    //           gitem.memo = undefined;
    //           gitem.id = undefined;
    //           gitem.questionGroupDetail = undefined;
    //           gitem.state = undefined;
    //           if (gitem.guidelineID > maxID && gitem.guidelineID) {
    //             maxID = gitem.guidelineID;
    //           }
    //           if (!gitem.guidelineID) {
    //             gitem.guidelineID = maxID + 1;
    //             maxID++;
    //           }

    //           // 将引导文记录到对象中
    //           newGuideline[gitem.guidelineID] = gitem;
    //           // if (tindex === 2) {
    //           // }
    //         });

    //         // 将对象类型的的引导文 赋值到guidelines
    //         titem.guidelines = newGuideline;

    //         titem.taskGroupID = item.taskGroupID ? item.taskGroupID : undefined;

    //         // 过滤任务未修改的字段    需要处理所有字段未修改
    //         if (titem.updateFieldName.length > 3 || !titem.taskID) {
    //           let markTitem = Object.assign({}, titem);
    //           titem = {};
    //           if (!markTitem.taskID) {
    //             titem = markTitem;
    //             titem.taskID = undefined;
    //           } else {
    //             markTitem.updateFieldName.forEach((fitem) => {
    //               titem[fitem] = markTitem[fitem];
    //             });
    //           }
    //           // 记录修改了任务字段，让任务组过滤未修改的字段时，保留tasks字段
    //           item.updateFieldName.push("tasks");
    //         } else if (titem.updateFieldName.length === 3 && titem.taskID) {
    //           this.$set(titem, "unAddTonewTasks", true);
    //         }
    //         // 删除updateFieldName属性
    //         titem.updateFieldName = undefined;
    //         if (titem && !titem.unAddTonewTasks) {
    //           if (titem.taskID) {
    //             newTasks[titem.taskID] = titem;
    //           } else {
    //             titem.taskID = undefined;
    //             newTasks[`newtask${markNoTaskId_Num}`] = titem;
    //             titem["groupNoInCourse"] = item.groupNoInCourse;
    //             markNoTaskId_Num++;
    //           }
    //         }
    //       });
    //       // debugger
    //       // 将格式化的数据 赋值到tasks
    //       item.tasks = Object.assign({}, newTasks);
    //       newTasks = undefined;

    //       // 过滤任务组未修改的字段
    //       if (item.updateFieldName.length > 2 || !item.taskGroupID) {
    //         let markItem = Object.assign({}, item);
    //         item = {};
    //         if (!markItem.taskGroupID) {
    //           item = markItem;
    //           item.taskGroupID = undefined;
    //         } else {
    //           markItem.updateFieldName.forEach((fitem) => {
    //             item[fitem] = markItem[fitem];
    //           });
    //         }
    //       } else if (item.updateFieldName.length === 2) {
    //         this.$set(item, "unAddTotaskGroups", true);
    //       }
    //       // 删除updateFieldName属性
    //       item.updateFieldName = undefined;

    //       if (item && !item.unAddTotaskGroups) {
    //         // 将格式化后的任务组数据赋值到 taskGroups属性中
    //         if (item.taskGroupID) {
    //           params.taskGroups[item.taskGroupID] = item;
    //         } else {
    //           item.taskGroupID = undefined;
    //           params.taskGroups[`newgroup${markNoGroupId_Num}`] = item;
    //           markNoGroupId_Num++;
    //         }
    //       }
    //     });
    //     params.taskGroups = Object.keys(params.taskGroups).length
    //       ? params.taskGroups
    //       : undefined;
    //     params.content = undefined;
    //     updatedesigncourse(params).then((res) => {
    //       if (res.errno === 0) {
    //         if (res.data === true) return;
    //         // this.$parent.formtCourseData(res.data);
    //         this.$parent.handleSetGourpInCourseAndTaskInGroup();
    //         Object.keys(res.data.taskGroups).filter((item) => {
    //           if (
    //             res.data.taskGroups[item].groupNoInCourse ===
    //             this.currData.groupNoInCourse
    //           ) {
    //             Object.keys(res.data.taskGroups[item].tasks).filter((titem) => {
    //               if (
    //                 res.data.taskGroups[item].tasks[titem].taskNoInGroup ===
    //                 this.currData.taskNoInGroup
    //               ) {
    //                 this.currData.taskID = Number(
    //                   res.data.taskGroups[item].tasks[titem].taskID
    //                 );
    //                 this.handelChange("taskID");
    //               }
    //             });
    //           }
    //         });
    //         this.$parent.fetchDesignCourseData({id:25})
    //         // this.$antdMessage.success({
    //         //   content: "任务添加成功！",
    //         // });
    //         resolve(true);
    //       } else {
    //         // this.$antdMessage.error({
    //         //   content: "任务创建失败！",
    //         // });
    //         resolve(false);
    //       }
    //     });
    //   });
    // },
    /**
     * @description 单独更新任务
     */
    // oldUpdateTaskContent() {
    //   let params = JSON.parse(JSON.stringify(this.currData));
    //   let courseID = this.$route.query.courseID;
    //   params["courseID"] = Number(courseID);
    //   // params.state = "已发布";
    //   params.id = undefined;
    //   params.memo = undefined;

    //   // 修改引导文为对象
    //   // 找到最大ID
    //   let maxID = params.guidelines
    //     .map((gitem, index) => {
    //       if (gitem.guidelineID) {
    //         return gitem.guidelineID;
    //       }
    //     })
    //     .filter((gitem) => gitem)
    //     .reverse()[0];
    //   maxID = !maxID && maxID !== 0 ? 0 : maxID;

    //   let newGuideline = {};
    //   params.guidelines.map((gitem, gindex) => {
    //     gitem.weightInTask = Number(gitem.weightInTask);
    //     gitem.noInTask = gindex + 1;
    //     gitem.memo = undefined;
    //     gitem.id = undefined;
    //     gitem.questionGroupDetail = undefined;
    //     gitem.state = undefined;
    //     if (gitem.guidelineID > maxID && gitem.guidelineID) {
    //       maxID = gitem.guidelineID;
    //     }
    //     if (!gitem.guidelineID) {
    //       gitem.guidelineID = maxID + 1;
    //       maxID++;
    //     }

    //     // 将引导文记录到对象中
    //     newGuideline[gitem.guidelineID] = gitem;
    //     // if (tindex === 2) {
    //     // }
    //   });

    //   // 将对象类型的的引导文 赋值到guidelines
    //   params.guidelines = newGuideline;

    //   updateTask(params).then((res) => {
    //     if (res.errno === 0) {
    //       this.$antdMessage.success({
    //         content: "任务更新成功！",
    //       });
    //     } else {
    //       this.$antdMessage.error({
    //         content: "任务更新失败！",
    //       });
    //     }
    //   });
    // },
    // 发布任务到课程库
    handlePubCourseOrTask(item, taskIDArray) {
      return new Promise((resolve) => {
        let courseID = Number(this.$route.query.courseID);
        let params = {
          courseID: courseID,
          userID: this.userInfo.userID,
          taskID: item.taskID,
          // taskIDArray: [],
        };
        if (taskIDArray?.length) {
          // delete params.taskID;
          // if (item.taskID) findTaskID.push(item.taskID)
          params.taskIDArray = taskIDArray;
        }
        if (!params.taskIDArray) {
          if (!params.taskID) {
            let getTaskID = this.$parent.courseDetailData.content[this.currGroupIndex].tasks[
              this.currTaskIndex
            ];
            if (!getTaskID) {
              this.$antdMessage.error({
                content: "任务信息获取失败，请刷新后重试！",
              });
              return;
            } else {
              params.taskID = getTaskID;
            }
          }
        }
        publishDesigncourse(params).then((res) => {
          if (res.errno === 0) {
            this.$antdMessage.success({
              content: "任务发布成功!",
            });
            resolve(true);
          } else {
            this.$antdMessage.error({
              content: res.message || "任务发布失败！",
            });
            resolve(false);
          }
        });
      });
    },
    // 接收引导文focus属性
    watchFocus(index, focus) {
      if (focus) {
        this.guidelineIsFocus.push(index);
      } else {
        this.guidelineIsFocus = this.guidelineIsFocus.filter(
          (item) => item !== index
        );
      }
    },
    // 全局保存数据后引导文会自动收起 将原来打开的引导文展开
    handleOpenedEdit() {
      let guidelines = this.$refs.guideline;
      guidelines.forEach((item) => {
        if (this.guidelineIsFocus.indexOf(item.gindex) !== -1) {
          item.focus = true;
        }
      });
    },
    handleShowDeleteDialog(gindex, gitem) {
      this.showDeleteTips = true;
      this.markDeleteGindex = gindex;
      this.markDeleteGitem = gitem;
    },
    handleSave() {
      this.$emit("handleSave")
    }
  },
};
</script>

<style lang="stylus">
$boderColor = solid 1px #b7b2b2;

.task {
  // max-width: 1405px;
  flex: 1;
  max-width: 850px;
  background-color: #eaeef3;
  box-shadow: 6px 8px 10px 0px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  border: solid 1px #eaeef3;

  .headBox {
    padding: 17px 0 10px 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: PMingLiU-ExtB;
    font-weight: bold;
    font-size: 22px;
    color: #0a0a0a;

    .taskIndex {
      // margin-left: 15px;
      i {
        cursor: pointer;
        font-size: 20px;
      }
    }

    .weightBox {
      // margin: 0 0 0 auto;
      height: 25px;
      width: 170px;
      font-family: PMingLiU-ExtB;
      font-size: 16px;
      color: #fed48c;

      .el-input {
        width: auto;

        .el-input__inner {
          padding: 0;
          width: 50px;
          height: 25px;
          line-height: 25px;
          border: none;
          border-radius: 0;
          background: transparent !important;
          border-bottom: 1px solid #707070;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #707070;
        }
      }

      .is-disabled {
        background: transparent !important;
      }
    }
  }

  .taskEdit {
    padding-top: 11px;
    padding-bottom: 20px;
    // padding: 27px 39px 45px 46px;
    max-width: 1405px;
    width: 100%;
    min-height: 865px;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(149, 126, 126, 0.15);
    border-radius: 5px;

    .inputTips {
      margin-right: 39px !important;
    }

    // border: solid 1px #707070;
    .headBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;

      .taskIndex {
        font-family: PMingLiU-ExtB;
        font-size: 25px;
        color: #0a0a0a;
        opacity: 0.55;
      }

      .weightBox {
        height: 40px;
        width: 115px;

        .el-input {
          width: auto;
          float: right;
          height: 100%;
          width: 100%;

          .el-input__inner {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #0a0a0a;
            border: solid 1px #707070;
          }
        }
      }
    }

    .taskInfo {
      margin: 0 39px 0 46px;
      // margin: 0 45px 0 40px;
      // padding-left: 25px;
      // margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .taskIconBox {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;

        .uploadComponent {
          .upload-demo {
            .el-upload {
              width: 100%;
              height: 100%;

              .uplaodControll {
                border-radius: 50%;
                border: none;
                border: $boderColor;
              }

              .iconBox {
                img {
                  object-fit: contain;
                  width: 53px;
                  height: 53px;
                }
              }

              .tips {
                font-size: 12px;
              }

              .fileListBox {
                width: 100%;
                height: 100%;

                .imgFileBox {
                  width: 100%;
                  height: 100%;

                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
              }
            }
          }
        }
      }

      .taskNameBox {
        position: relative;
        margin-left: 30px;
        flex: 1;
        max-width: 652px;
        height: 80px;
        background-color: #ffffff;

        .el-input {
          height: 100%;

          .el-input__inner {
            height: 100%;
            border: solid 1px #b7b7b7;
            border-radius: 10px;
            text-align: center;
            border: none;
            border: $boderColor;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 22px;
            color: #0a0a0a;
            // opacity: 0.55;
          }

          .el-input__inner::placeholder {
            opacity: 0.5;
          }
        }
      }
    }

    .goalAnddesc {
      margin: 0 39px 0 46px;
      // margin: 0 45px 0 40px;
      // padding-left: 22px;
      margin-top: 44px;
      max-width: 765px;

      .goalBox {
        margin-top: 10px;
        position: relative;
        // width: 1313px;
        width: 100%;
        // height: 100px;
        background-color: #ffffff;

        .el-textarea {
          height: 100px;

          .el-textarea__inner {
            padding: 12px 12px;
            border: none;
            border: $boderColor;
            border-radius: 10px;
            font-family: PMingLiU-ExtB;
            font-size: 16px;
            color: #7e7e7e;
          }
        }
      }

      .descBox {
        position: relative;
        margin-top: 32px;
        width: 100%;
        // width: 1313px;
        // max-height: 100px;
        background-color: #ffffff;

        // border: solid 1px #b7b7b7;

        .el-switch {
          margin-right: 10px;
        }

        .editText {
          padding: 0;

          .toolBar {
            height: 41px;

            .w-e-toolbar {
              height: 40px;
              padding: 0;
            }
          }

          .edit {
            padding: 0;
            max-width: unset;
            min-height: 57px;
            max-height: 150px;
            overflow-y: scroll;
            border: none;
            word-spacing: 5px;

            .w-e-text {
              padding-top: 10px;
              min-height: 57px;
            }

            .placeholder {
              top: 10px;
            }

            p {
              margin: 0;
            }
          }

          .edit::-webkit-scrollbar {
            width: 4px;
            height: 1px;
          }

          /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
          .edit::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
            background: #ccc;
            border-radius: 10px;
          }

          /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
          .edit::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
            border-radius: 4px;
          }
        }
      }

      .el-textarea {
        height: 100%;

        .el-textarea__inner {
          resize: none;
          padding: 9px 8px;
          height: 100%;
          border: none;
          font-family: PMingLiU-ExtB;
          font-size: 18px;
          color: #0a0a0a;
        }

        .el-textarea__inner::-webkit-scrollbar {
          width: 4px;
          height: 1px;
        }

        /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
        .el-textarea__inner::-webkit-scrollbar-thumb {
          -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
          background: #f9f9f9;
          border-radius: 10px;
        }

        /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
        .el-textarea__inner::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
          border-radius: 4px;
        }
      }
    }

    .guidelinesBox {
      // padding-left: 22px;
      margin-top: 42px;

      /* 被拖拽对象的样式 */
      .item {
        padding: 6px;
        background-color: #fdfdfd;
        border: solid 1px #eee;
        margin-bottom: 10px;
        cursor: move;
      }

      .item:hover {
        background-color: #f1f1f1;
        cursor: move;
      }

      /* 选中样式 */
      .chosen {
        .editText {
          border: solid 1px #3089dc !important;
        }
      }

      .title {
        width: 103px;
        height: 49px;
        line-height: 49px;
        text-align: center;
        background-color: rgba(211, 223, 226, 0.51);
        font-family: PMingLiU-ExtB;
        font-size: 20px;
        color: #0a0a0a;
        opacity: 0.55;
      }

      .guidelineBox {
        padding: 0 39px 0 46px;

        .guideline {
          position: relative;
          margin-top: 38px;
          // margin-left: 41px;
          display: flex;
          flex-direction: column;
          max-width: 1270px;
          // min-height: 170px;
          background-color: #ffffff;
          // border: solid 1px #cbcbcb;
          border-bottom: none;

          .startMustTips {
            top: 25px;
          }

          .guidelineNum {
            position: absolute;
            left: -18px;
            top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #bcbcbc;
          }

          .addIcon {
            width: 100px;
            height: 30px;
            position: absolute;
            left: -28px;
            top: -20px;
            display: none;

            img {
              cursor: pointer;
              width: 20px;
              height: 20px;
            }
          }

          .removeIcon {
            position: absolute;
            right: -29px;
            top: -20px;
            display: none;

            img {
              cursor: pointer;
              width: 29px;
              height: 29px;
            }
          }

          .addIcon-down {
            display: block;
            top: unset;
            bottom: -19px;
            display: none;

            img {
              transform: translate(0, 9px);
            }
          }

          .content {
            flex: 1;

            // .el-textarea {
            // height: 100%;

            // .el-textarea__inner {
            // height: 100%;
            // border: 0;
            // }
            // }
            .editText {
              .edit {
                padding: 13px 11px;
                min-height: 91.5px;
                max-height: 550px;
                max-width: unset;
                overflow-y: scroll;

                .w-e-text {
                  min-height: calc(91.5px);
                  padding: 0;
                }

                p {
                  margin-top: 0;
                }
              }

              .placeholder {
                left: 0;
              }

              .edit::-webkit-scrollbar {
                width: 4px;
                height: 1px;
              }

              /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
              .edit::-webkit-scrollbar-thumb {
                -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
                background: #ccc;
                border-radius: 10px;
              }

              /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
              .edit::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.1);
                border-radius: 4px;
              }
            }
          }
        }

        .guidelineS:first-child {
          margin-top: 18px;
        }
      }

      .guidelineBox:hover {
        .guideline {
          .addIcon {
            display: block;
          }

          .removeIcon {
            display: block;
          }

          .addIcon-down {
            display: block;
          }
        }
      }
    }

    .remarksCompontent {
      margin: 0 39px 0 46px;
      margin-top: 20px;
    }
  }
}

.quill-editor {
  height: auto !important;
}

.operTypeSelect {
  margin-top: 0 !important;
  min-width: 164px !important;
  top: 51px !important;
  left: -1px !important;
  border-radius: 0;
  border-color: #cbcbcb;
  border-top: none;
  box-shadow: none;

  .el-select-dropdown__wrap {
    .el-scrollbar__view {
      max-width: 164px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;

      .el-select-dropdown__item {
        padding: 0 19px;
        font-family: PMingLiU-ExtB;
        font-size: 16px;
        color: rgba(104, 101, 101, 0.72);
      }
    }
  }

  .popper__arrow {
    display: none;
  }
}
</style>